<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<text style="font-size: .9em;" slot="content">2109年秋季学期八年级期末考试各班质量跟</text>
		</cu-custom>
		<a-fixed :height="40">
			<a-tabs @click="clickTabs" :row="4" type="border" :value="tabs2">
				<template #filter="{row,index}">
					<text style="color: #000000;" @click="$refs.rightDrawer.open()">筛选</text>
					<text style="font-size: .9em;color: #0062CC;" class="iconfont icon-shaixuan"></text>
				</template>
			</a-tabs>
		</a-fixed>
		<a-fixed :height="40">
			<view style="display: inline-block; margin-top: 6px;margin-left: 6px;padding: 4px 20px;background-color: #00a2f3;box-shadow: 0 0 2px 0 rgba(0,0,0,.2); border-radius: 999px;color:#fff">
				<text style="margin-right: 1em;">任课老师：马化腾</text>
				<text>等分老师：马玉</text>
			</view>
		</a-fixed>
		<a-scroll :request="get" ref="aScroll" :parm='{pageSize:15}'>
			<template #item="{row:x,index}">
				<a-list :hide-icon="true" :value="x">
					<template #bottom-right>
						<view class="grade" :class="x.grade">
							{{x.grade}}
						</view>
					</template>
				</a-list>
			</template>
		</a-scroll>
		<!--右抽屉-->
		<uni-drawer :width="360" ref="rightDrawer" mode="right">
			<y-form :keys="columns" v-model="info" @submit="submit" submit-text="确定"></y-form>
		</uni-drawer>
	</view>
</template>

<script>
	import yForm from "@/y-ui/y-form/y-form.vue";
	export default {
		components: {
			yForm
		},
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				info: {},
				tabs2: [{
					name: "按学号",
					id: "2"
				}, {
					name: "按姓名",
					id: "3"
				}, {
					name: "按成绩",
					id: "4"
				}, {
					disabled: true,
					slot: "filter"
				}],
				tabsParm: {
					name: "按学号",
					id: "2"
				},
				range: [{
					name: "1231",
					value: '1'
				}]
			}
		},
		computed: {
			columns() {
				return [{
					type: 'y-picker',
					key: 'remark',
					lable: '学期：',
					rangeKey: "name",
					valueKey: "value",
					range: this.range
				}, {
					type: 'y-picker',
					key: 'startTime',
					lable: '考试：',
					rangeKey: "name",
					valueKey: "value",
					range: this.range
				}, {
					type: 'y-picker',
					key: 'endTime',
					lable: '班级：',
					rangeKey: "name",
					valueKey: "value",
					range: this.range
				}, {
					type: 'y-picker',
					lable: `科目：`,
					key: 'daysOff',
					rangeKey: "name",
					valueKey: "value",
					range: this.range
				}];
			}
		},
		methods: {
			get(parm = {}) {
				const data = new Array(15).fill({
					name: "蒋介石",
					sonTitle: "学号：22334432343556642",
					phone: "66.7分",
					grade: 'A'
				});
				console.log('请求：' + JSON.stringify({
					...parm,
					...this.tabsParm,
					...this.info
				}));
				return new Promise(r => {
					setTimeout(e => {
						r({
							total: 200,
							data
						})
					}, 1000);
				});
			},
			clickTabs(e) {
				if (e.disabled) return;
				this.tabsParm = e;
				this.$refs.aScroll.get(true);
			},
			submit(e) {
				this.$refs.aScroll.get(true);
				this.$refs.rightDrawer.close();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.grade {
		font-size: 18px;
		width: 1.6em;
		height: 1.6em;
		line-height: 1.6em;
		vertical-align: middle;
		text-align: center;
		background-color: #555555;
		color: #fff;
		border-radius: 50%;

		&.a,
		&.A {
			background-color: orange;
		}

		&.b,
		&.B {
			background-color: purple;
		}

		&.c,
		&.C {
			background-color: blue;
		}
	}
</style>
